<template>
  <div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="通用样式" name="1">
        <el-form>
          <el-form-item v-for="({ key, label }, index) in styleKeys" :key="index" :label="label">
            <el-color-picker v-if="isIncludeColor(key)" v-model="curComponentStyle[key]" show-alpha size="mini" @change="changeCurComponentStyle"></el-color-picker>
            <el-select v-else-if="selectKey.includes(key)" v-model="curComponentStyle[key]" @change="changeCurComponentStyle">
              <el-option v-for="item in optionMap[key]" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-input v-else v-model="curComponentStyle[key]" @input="changeCurComponentStyle" type="number"></el-input>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { styleData, selectKey, optionMap } from './Attr.js'
import { mapState } from 'vuex'
import { formatStyle, cutStyle } from '@/utils/style.js'

export default {
  data() {
    return {
      styleData,
      selectKey,
      optionMap,
      activeNames: ''
    }
  },
  computed: {
    ...mapState(['curComponent']),
    // 获取选中控件的属性名称
    styleKeys() {
      if (this.curComponent) {
        // 获取当前选中控件的属性
        const componentStyleKeys = Object.keys(this.curComponent.style)
        // 利用控件属性筛选要渲染的表单列表名称
        return styleData.filter((item) => componentStyleKeys.includes(item.key))
      }
    },
    // 选中控件的样式
    curComponentStyle() {
      return cutStyle(this.curComponent.style)
    }
  },
  methods: {
    handleChange() {},
    // 判断是否含有color相关的属性
    isIncludeColor(str) {
      return str.toLowerCase().includes('color')
    },
    // 改变选中控件属性时 修改控件属性
    changeCurComponentStyle() {
      const style = formatStyle(this.curComponentStyle)
      this.$store.commit('setCurComponentStyle', style)
    }
  }
}
</script>

<style lang="less" scoped></style>
